<!DOCTYPE html>
<html ng-app="app">

<head>
    <meta charset="utf-8">
    <title>礼品商城</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="__STATIC__/index/css/mui.min.css">
    <link rel="stylesheet" href="__STATIC__/index/css/commen.css" />
    <link rel="stylesheet" href="__STATIC__/index/css/gift/dj_gift.css" />
    <style type="text/css">
        #pop_into4 {
            width: 266px;
            height: 271;
            bottom: 50%;
            left: 50%;
            background-color: #30353F;
            margin-left: -133px;
            margin-bottom: -135px;
        }
        .mui-tooltip {
            display: none !important;
        }
        .dj_del,
        .dj_add {
            display: inline-block;
            width: 25px;
            height: 25px;
            background: -webkit-linear-gradient(#77DFFB, #2568A9);
            /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(#77DFFB, #2568A9);
            /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(#77DFFB, #2568A9);
            /* Firefox 3.6 - 15 */
            background: linear-gradient(#77DFFB, #2568A9);
            /* 标准的语法 */
            color: #fff;
            font-size: 30px;
            line-height: 0.7;
            vertical-align: middle;
        }
        .rangeRate{
            display: inline-block;
            position: absolute;
            left: 0;
            top: 46%;
            background: #41C6CB;
            height: 5px;
            border-radius: 3px;
            z-index: 5;
        }
        .mui-input-range input[type='range']::-webkit-slider-thumb {
            background-color: #4193CB;
            background-image: url(__STATIC__/index/img/gift/djhl.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            z-index: 10;
        }
        .mui-input-range input[type=range] {
            height: 5px;
            background-color: #394779;
            -webkit-appearance: none!important;
        }
        .title_djxq {
            text-align: center;
            color: #fff;
            font-size: 16px;
            margin-bottom: 26px;
            margin-top: 13px;
        }
        .mui-icon-closeempty {
            color: #F7561E;
            font-size:44px;
            position: absolute;
            right: -5px;
            top: -5px;
        }

        ul {
            margin: 0;
            padding: 0;
        }

        .djLogo {
            width: 35px;
            height: 35px;
            border: 1px solid #D7D7D7;
            border-radius: 5px;
            margin-right: 20px;
            margin-top: 5px;
        }

        .djInfo {
            list-style: none;
            overflow: hidden;
            width: 50%;
            margin: 26px auto 15px;
        }

        .djInfo li {
            float: left;
        }

        .djInfo li p {
            color: #fff;
        }

        .buyBtn {
            width: 80px;
            height: 30px;
            background-color: #F7561E;
            color: #fff;
            text-align: center;
            line-height: 30px;
            margin: 20px auto;
            border-radius: 5px;
        }

        .djNum {
            color: #F7561E;
            font-size: 18px;
        }

        .mui-input-row.mui-input-range {
            padding-right: 0;
        }

        .mui-input-range .mui-tooltip {
            font-size: 14px;
            line-height: 20px;
            width: 20px;
            height: 20px;
            color: white;
            background-color: #F7561E;
        }
        /*增加的效果*/
        .exchange_btn_jd
        {
            background: #ee5420;
            color: #fff;
            border: 0;
        }

        .exchange_btn_jd {
            float: right;
            padding: 2px 8px;
        }

        .special_margin {
            position: relative;
        }

        .special_margin:after {
            content: '';
            color: #fff;
            position: absolute;
            right: 0;
            top: 0;
            height: 0;
            width: 0;
            border-top: 60px solid #F7561E;
            border-left: 60px solid transparent;
        }

        .cardName {
            position: absolute;
            top: 8px;
            right: 0;
            color: #fff;
            font-size: 12px;
            transform: rotate(48deg);
            z-index: 1;
        }
        input::-webkit-input-placeholder {
                   /* placeholder颜色  */
                  color: #aab2bd;
                  /* placeholder字体大小  */
                  font-size: 12px;
                  /* placeholder位置  */
                  text-align: center;
        }
    </style>
</head>
<body ng-controller="gift_controller">
<header class="mui-bar mui-bar-nav">
    <h1 class="mui-title">礼品商城</h1>
</header>
<div class="mui-content">
    <div id="pullrefresh">
        <div style="padding-bottom: 50px;">
            <div class="baner_container">
            </div>
            <div class="card_type">
                <div class="oils_name mui-text-center">
                   <!-- <img src="__STATIC__/index/img/gift/yldd_bg.png" alt="" />-->
                    <h4 style="color:#fff" >我的鱼卷 {$user.Lottery}</h4>
                </div>
                <div class="card_list mui-clearfix">
                    <div class="card_option special_margin">
                        <img data-echo="__STATIC__/index/img/home/yk_loading.png" src="__STATIC__/index/img/home/yk_loading.png" class="hdLogo" alt="" />
                        <p class="mui-clearfix" style="text-align: center;" >
                            <span class="cardName">30元话费</span>
                            需要3000鱼卷
                        </p>
                        <p class="mui-clearfix">
                            <img src="__STATIC__/index/img/gift/ldLogo.png" />
                            <span class="or_text special_or_text" style="font-size: 16px;"><span style="font-size: 18px !important;">3000</span>鱼卷</span>
                            <button class="exchange_btn" style="top:4px;" as="3000" ys="30元话费" type="1" lottery="3000" img="__STATIC__/index/img/home/yk_loading.png"  >立即兑换</button>
                        </p>
                    </div>
                    <div class="card_option special_margin">
                        <img data-echo="__STATIC__/index/img/home/yk_loading.png" src="__STATIC__/index/img/home/yk_loading.png" class="hdLogo" alt="" />
                        <p class="mui-clearfix" style="text-align: center;" >
                            <span class="cardName">京东卡</span>
                            需要10000鱼卷
                        </p>
                        <p class="mui-clearfix">
                            <img src="__STATIC__/index/img/gift/ldLogo.png" />
                            <span class="or_text special_or_text" style="font-size: 16px;"><span style="font-size: 18px !important;">10000</span>鱼卷</span>
                            <button class="exchange_btn" style="top:4px;" as="10000" ys="京东卡" type="2" lottery="10000" img="__STATIC__/index/img/home/yk_loading.png"  >立即兑换</button>
                        </p>
                    </div>
                    <div class="card_option" style="height: 238px;padding: 0;" >
                        <img src="__STATIC__/index/img/gift/jqqd.png" alt="" class="qd_img" style="margin-top: 50px !important;" />
                    </div>
                </div>
            </div>
            <div class="card_type">
                <div class="oils_name mui-text-center">
                    <img src="__STATIC__/index/img/gift/smlb.png" alt="" />
                </div>
                <div class="card_list mui-clearfix">
                    <div class="card_option">
                        <img src="__STATIC__/index/img/gift/jqqd.png" alt="" class="qd_img" style="margin-top: 40px !important;" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="pop_into4" class="mui-popover mui-popover-action mui-popover-bottom">
    <div class="mui-content">
        <p class="title_djxq">兑换 <span class="mui-icon mui-icon-closeempty"></span></p>
        <p class="toolsbeizhu"  style="text-align: center;color: #fff;">详请咨询微信客服:hemabuyu888</p>
        <ul class="djInfo">
            <li class="djLogo">
                <img src="" alt=""  style="width:35px;height:35px;" />
            </li>
            <li>
                <p class="toolname" ></p>
                <p class="toolsprice" ></p>
            </li>
        </ul>
        <div class="mui-input-row mui-input-range" style="text-align: center;" >
            <span style="color:#fff;font-size:14px;">兑换手机号:</span>
            <input type="text" id="phone" value=""  placeholder="充值手机号"  style="width:60%;height:30px;" />
        </div>
        <div class="mui-input-row mui-input-range" style="text-align: center;" >
            <span style="color:#fff;font-size:14px;">确认手机号:</span>
            <input type="text" id="rephone" value=""  placeholder="确认手机号"  style="width:60%;height:30px;" />
        </div>
        <input type="hidden" id="type" value=" " />
        <input type="hidden" id="lottery" value=" " />
        <p class="buyBtn" >兑换</p>
    </div>
</div>
<script src="__STATIC__/index/js/mui.min.js"></script>
<script src="__STATIC__/index/js/jquery.min.js"></script>
<script src="__STATIC__/index/js/angular.min.js"></script>
<script src="__STATIC__/index/js/config.js"></script>
<script src="__STATIC__/index/js/gift/gift.js"></script>
<script src="__STATIC__/layer/layer.js"></script>
<script src="__STATIC__/index/js/home/echo.min.js"></script>
<script>
    $(function() {
        mui('.card_option').on('tap', '.exchange_btn', function() {
            var name = $(this).attr('ys');
            var price = $(this).attr('as');
            var lottery = $(this).attr('lottery');
            var type = $(this).attr('type');
            var img = $(this).attr('img');
            var s = '鱼券:' + price;
            $('.djLogo img').attr('src', img);
            $('.toolname').text(name);
            $('.toolsprice').text(s);
            $('#type').attr('value', type);
            $('#lottery').attr('value',lottery);
            mui('#pop_into4').popover('show');
        })
        mui('#pop_into4').on('tap', '.buyBtn', function () {
            var phone = $('#phone').val();
            var rephone = $('#phone').val();
            var type = $('#type').val();
            var lottery = $('#lottery').val();
            var btnArray = ['否', '是'];
            mui.confirm('您确定花费'+lottery +'鱼卷兑换花费吗？', ' ', btnArray, function (e) {
                    if (e.index == 1) {
                        $.ajax({
                            type: 'POST',
                            dataType: "json",
                            url: "{:url('gift/exchange')}",
                            data: {
                                type: type,
                                phone: phone,
                                rephone: rephone,
                                lottery: lottery
                            },
                            success: function (re) {
                                if (re.code == 1) {
                                    layer.msg(re.msg, {
                                        time: 1000
                                    }, function () {
                                        //操作事件
                                        mui('#pop_into4').popover('hide');
                                        location.href = "{:url('gift/success_re')}";
                                    })
                                } else {
                                    layer.msg(re.msg, {
                                        time: 1000
                                    }, function () {
                                        mui('#pop_into4').popover('hide');
                                    })
                                }
                            }
                        });
                    }
                });
        })
    })
    mui('#pop_into4').on('tap', '.mui-icon-closeempty', function() {
        mui('#pop_into4').popover('hide');
    })
</script>
<script type="text/javascript">
    Echo.init({
        offset: 0,
        throttle: 0
    });
    var p = 0;
    var t = 0;
    $(window).scroll(function(e) {
        p = $(this).scrollTop();
        if(t <= p) {
            //下滚
            $("header").hide();
        } else {
            //上滚
            $("header").show();
        }
        setTimeout(function() {
            t = p;
        }, 0);
    });

    function hide_pop3() {
        mui('#pop_into3').popover('hide');
    }
    mui('nav').on('tap', 'a', function() {
        document.location.href = this.href;
    });
</script>
</body>

</html>